<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>原生js写过渡与动画</title>
    <style>
        .picture {
            width: 200px;
            transition: 1s all linear;
        }

        .leave {
            opacity: 0;
            transform: scale(0) rotate(180deg);
        }

        .come {
            opacity: 1;
            transform: scale(1) rotate(0deg);
        }
    </style>
</head>
<body>
<div>
    <!--
    transition
        过渡时间transition-duration
        过渡属性transition-property
        过渡方式transition-timing-function
        延迟时间transition-delay
   transform 变换 改变
    -->
    <button onclick="change()">切换动画</button>
    <br><br><br>
    <img src="https://s3.ax1x.com/2020/12/13/reCaqg.jpg" class="picture">
</div>
<script type="text/javascript">
    let isShow = true

    function change() {
        const img = document.querySelector('.picture')
        if (isShow){
            img.className='picture leave'
        }else {
            img.className='picture come'
        }
        isShow=!isShow
    }

</script>
</body>
</html>